<template>
  <basic-dialog :visible="setProductDialog"
                minWidth="400px"
                title="下载模板"
                isShowClose
                @submit="submit"
                @close="hideDialog"
                is-show-basic-footer
                :isShowInnerLoading="loading">
    <q-form class="margin-t-20 margin-r-20 margin-l-20" ref="form" greedy>
      <fuzzy-search
        v-model.trim="productId"
        fuzzyNumber="keyword"
        :isShowValue="false"
        showAllOption
        isForm
        smallSize
        title="物模型"
        :rules="[val => val !== null || '请选择物模型']"
        :options="deviceTypeOptions"
        :fuzzyFunc="getFilter"
      ></fuzzy-search>
    </q-form>
  </basic-dialog>
</template>

<script>

export default {
  name: 'set-device-dialog',
  components: {
  },
  props: {
    setProductDialog: {
      type: Boolean,
      default: false
    },
    deviceTypeOptions: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      loading: false,
      productId: ''
    }
  },
  methods: {
    hideDialog () {
      this.$emit('close')
    },
    getFilter (val) {
      return new Promise(resolve => {
        const res = {
          code: '1200',
          data: [],
          message: ''
        }
        if (val) {
          res.data = this.deviceTypeOptions.filter(item => {
            return item.label.toLowerCase().indexOf(val.toLowerCase()) > -1
          })
          resolve(res)
        } else {
          res.data = this.deviceTypeOptions
          resolve(res)
        }
      })
    },
    submit () {
      const info = this.deviceTypeOptions.find(item => item.value === this.productId)
      this.$emit('submit', info)
    }
  }
}
</script>

<style scoped>

</style>
